jQuery中的DOM操作

头像
a达达
    阅读 8 分钟

    DOM操作

    查找节点

    • $( ) - 可以通过jQuery选择器来查找元素节点
    • attr( ) - 可以通过jQuery对象提供的方法来查找属性节点
    • text( ) - 可以通过jQuery对象提供的方法来查找文本节点

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<button id="btn" name="button">按钮</button>
<script>
    // 定位页面元素 - jQuery的选择器
    var $btn = $('#btn');
    // 指定元素的文本内容 - 类似于DOM中的textContent属性
    console.log($btn.text());
    // 指定元素的指定属性名得到的属性值 - 类似于DOM中的getAttribute(attrName)
    console.log($btn.attr('name'));
    // 为指定元素设置文本内容
    $btn.text('新按钮');

    $btn.attr('class','cls');

    /*
        jQuery查找页面元素 - 并没有参考DOM中的Node对象，而是Element对象
        * text()方法 - 类似于DOM中的textContent属性
          * 获取 - text()
          * 设置 - text(textContent)
            * textContent - 表示新的文本内容
        * attr()方法
          * 获取 - attr(name) - 类似于DOM中的getAttribute(name)
          * 设置 - attr(name, value) - 类似于DOM中的setAttribute(name, value)
     */

</script>
</body>

    遍历节点

    获取父节点

    • parent( ) - 表示获取指定元素的父级“括号中填写可选参数
    • parents() - 表示获取指定元素的祖先“括号中填写可选参数（可以不写）”closest( ) - 表示获取与指定元素第一个匹配的祖先“括号中填写匹配指定元素的选择器
    • 注意:
    • parents()的参数不能不写
    • parent()的参数可以不写

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>
<script>
    var $bj = $('#bj');
    /*
        获取北京节点的父节点
        parent(expr)方法
        * 作用 - 获取指定元素的父元素
        * 参数
          * expr - 可选，表示为选择器，起到过滤作用
      */
    console.log($bj.parent('div'));
    /*
        获取北京节点的所有祖先节点
        parents(expr)方法
        * 作用 - 获取指定元素的所有祖先元素
        * 参数
          * expr - 可选，表示为选择器，起到过滤作用
     */
    console.log($bj.parents('div'));
    /*
        closest()方法
        * 作用 - 获取指定元素的指定祖先元素，返回第一个匹配的元素
        * 参数
          * expr - 表示为选择器，起到过滤作用
        注意 - jQuery永不报错，只是不提供结果
     */
    console.log($bj.closest('div'));

</script>
</body>

    获取子节点

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li id="bj">北京
            <ul>
                <li>东城区</li>
                <li>西城区</li>
                <li>朝阳区</li>
            </ul>
        </li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</div>
<script>
    var $ul = $('ul:first');
    // 获取指定元素的所有子元素
    console.log($ul.children());
    // 获取指定元素的指定后代元素
    console.log($ul.find('li'));

</script>
</body>

    获取兄弟节点

    • siblings() - 获取指定元素所有的兄弟元素
    • prev() - 获取指定元素的上一个相邻兄弟元素
    • next() - 获取指定元素的下一个相邻兄弟元素

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li>南京</li>
        <li>北京</li>
        <li id="tj">天津</li>
        <li>重庆</li>
        <li>长春</li>
    </ul>
</div>
<script>
    var $tj = $('#tj');
    // next() - 表示获取下一个相邻兄弟元素
    console.log($tj.next());
    // prev() - 表示获取上一个相邻兄弟元素
    console.log($tj.prev()); 
</script>
</body>

    创建节点

    • $( ) - 可以创建元素节点“括号中直接填写要创建的元素
    • text( ) - 可以创建文本节点“括号中直接填写要创建的文本内容
    • attr( ) - 可以创建属性节点“括号中直接填写要创建的属性（先写属性名，在写属性值
    • $( ) - 也可以直接创建带有属性和文本内容的元素“括号中直接填写要创建的HTML代码

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li>南京</li>
    <li>北京</li>
    <li id="tj">天津</li>
    <li>重庆</li>
</ul>
<script>
    // 1.创建元素节点
    // var $newLi = $('<li></li>');
    // 2.设置文本内容
    // $newLi.text('佳木斯');
    // 3.设置属性
    // $newLi.attr('id','cc');

    // jQuery的工厂函数接收的是字符串类型的HTML代码
    var $newLi = $('<li id="cc">佳木斯</li>');

    $('#city').append($newLi);

</script>
</body>

    插入节点

    插入内部节点

    • 插入内部节点 - 就是为指定元素添加子节点
    • append() - 插入到指定节点的所有子节点列表的最后面
    • prepend() - 插入到指定节点的所有子节点列表的前后面
    • appendTo()方法是append()方法逆操作
    • prependTo()方法是prepend()方法逆操作

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 1.创建新的<li>元素
    var $li = $('<li id="cc">佳木斯</li>');
    // append() - 类似于DOM中的appendChild()
    // $('ul').append($li);
    // appendTo()方法与append()互为逆操作
    // $li.appendTo($('ul'));

    // prepend()方法 - 插入指定节点的所有子节点列表的最前面
    $('ul').prepend($li);

</script>
</body>

    插入外部节点

    • 插入外部节点 - 就是为指定元素添加兄弟节点

    示例代码:

       <script src="js/jquery.js"></script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 1.创建新的<li>元素
    var $li = $('<li id="cc">佳木斯</li>');

    // $('ul').before($li);
    $('ul').after($li);

</script>
</body>

    删除节点

    • remove( ) - 表示删除指定元素,()中填写与指定的元素相匹配的选择器
    • empty( ) - 表示删除指定元素的所有后代元素 - 就是清空
    • 备注: jQuery中删除节点是谁调用remove删除谁

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 哪个元素调用remove() - 哪个元素被删除
    // $('#bj').remove();
    // empty()表示删除后代节点，保留自身节点 - 清空
    $('#city').empty();

</script>
</body>

    复制节点

    • clone() - 表示对指定的元素进行复制
    • 注意()中填写布尔值被的无效
    • true - 表示对指定元素所绑定事件进行复制
    • false - 表示不对指定元素所绑定的事件进行复制
    • 注意: 事件需要通过jQuery方式进行绑定才可复制

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">按钮</button>
<script>
    $('#btn').click(function(){
        console.log('this is button');
    });
    /*
        * jQuery的clone(boolean)方法 - 参数表示是否复制事件
        * DOM的cloneNode(boolean)方法 - 参数表示是否复制后代节点
     */
    var $copy = $('#btn').clone(true);

    $('body').append($copy);

</script>
</body>

    替换节点

    • replaceWith() - 表示由被替换调用该方法进行替换,()中填写用来替换的元素
    • replaceAll() - 表示由用来替换元素调用该方法进行替换()中填写被替换的元素

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // 被替换的元素调用replaceWith()方法，该方法接收的参数是替换的元素
    // $('#bj').replaceWith($('<li id="cc">长春</li>'));
    // replaceAll()方法就是颠倒了的replaceWith()方法
    $('<li id="cc">长春</li>').replaceAll($('#bj'));

</script>
</body>

    属性操作

    • attr( ) - 表示获取指定元素的指定属性
    • removeAttr( ) - 表示删除指定元素的指定属性

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<script>
    // removeAttr()方法 - 类似于DOM中的removeAttribute()
    $('#bj').removeAttr('id');

</script>
</body>

    样式操作

    • text() - 表示获取指定元素的文本内容

    示例代码:

        <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .two {
            width: 400px;
            height: 400px;
            background-color: yellowgreen;
        }

    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<div id="box"></div>
<script>
    // 通过设置style属性为<div>元素添加内联样式 - 代码可读性
    // $('#box').attr('style','width:100px;height:100px;background-color:red;');

    // 通过设置class属性为<div>元素添加外联样式 - 预定义
    $('#box').attr('class','one');

    // addClass(className)方法 - 表示添加样式(并不影响指定元素原本的样式)
    $('#box').addClass('two');
    // $('#box').attr('class','two');// 替换样式

    /*
        removeClass()方法 - 删除样式
        * removeClass()方法 - 删除所有样式
        * removeClass(className) - 删除指定样式
          * 如果删除多个指定样式，样式名称之间使用空格分隔
     */
    // $('#box').removeClass('one');

    // toggleClass()方法 - 在删除指定样式与添加指定样式之间切换
    // $('#box').toggleClass('one');

    // hasClass(className)方法 - 判断指定元素中是否包含指定样式名称
    console.log($('#box').hasClass('one'));

    /*
        css()方法
        * css(name) - 获取指定元素的指定样式属性值
        * css(name, value) - 为指定元素设置指定的样式属性值(内联样式)
        * css(options) - 为指定元素设置指定的样式属性值(内联样式)
          * options - 是一个对象类型的，表示所有的样式属性
     */
    console.log($('#box').css('width'));

    // $('#box').css('width','600px');
    // $('#box').css('height','600px');
    // jQuery支持链式操作 - jQuery提供的方法都统一返回jQuery对象
    // $('#box').css('width','600px').css('height','600px');

    $('#box').css({
        width: '600px',
        height: '600px'
    });

</script>
</body>

    HTML操作

    示例代码:

        <script src="js/jquery.js"></script>
</head>
<body>
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>
<input type="text" value="请输入你的用户名">
<script>
    console.log($('#city').html());

    var $html = $('#city').html();
    $html += '<li>长春</li>';
    $('#city').html($html);

    console.log($('input').val());

    $('input').val('密码');

</script>
</body>
    jquery
    a达达
    21 声望5 粉丝
    « 上一篇
    jQuery中的选择器
    下一篇 »
    jQuery中的事件个人分享

    引用和评论

    推荐阅读
    头像
    Ajax系列之JSON数据格式

    a达达阅读 2.6k

    头像
    采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版

    注销阅读 1.1k

    0 条评论
    得票最新